@import '../variables.css';

.groupRoot {
  margin-bottom: var(--control-margin-bottom);
}

.groupLabel {
  display: block;
  font-size: var(--font-size-small);
  font-weight: var(--text-weight-basis);
  color: var(--color-text);

  &.required::after {
    content: '(required)';
    margin: 0 4px;
    color: var(--color-text-p2);
  }
}

legend.groupLabel {
  border-bottom: 0;
  margin-bottom: 6px;
}

.groupFeedback {
  padding: 0 0.4rem;
  font-size: var(--font-size-small);

  &:last-child {
    margin-bottom: var(--control-margin-bottom);
  }
}

.groupError {
  composes: groupFeedback;
  color: #900;
  font-weight: 700;
}

.groupWarning {
  composes: groupFeedback;
  color: #e27c3e;
  font-weight: 700;
}
